<template>
  <el-row style="height: 60px;line-height: 60px">
    <el-col :span="12" style="font-size: 18px;font-weight: bold">我的地址</el-col>
    <el-col :span="12" style="text-align: right">
      <el-button type="primary" size="default" @click="addDialogShow = true">添加地址</el-button>
    </el-col>
  </el-row>
  <div>
    <ul class="addrList">
      <li v-for="(addr, index) in addrList" :key="index" :class="{defaultCart: addr.status !== 0}" >
        <div class="area">{{ addr.province }} - {{ addr.city }} - {{ addr.district }} - {{ addr.street }}</div>
        <div class="adress">{{ addr.address }}</div>
        <div class="contact">{{ addr.contact }}</div>
        <div class="phone">{{ addr.phone }}</div>
        <div class="option">
          <el-button v-show="addr.status == 0" @click="setDefaultAddr(addr.id)">设为默认</el-button>
          <el-button @click="showEdit(addr.id)">编辑</el-button>
          <el-button @click="delAddr(addr.id)">删除</el-button>
        </div>
      </li>
    </ul>
  </div>


  <!-- START 新增对话框 -->
  <el-dialog v-model="addDialogShow" title="添加地址" align-center>
    <el-form>
      <el-form-item label="地址">
        <el-select
            v-model="addr.province"
            placeholder="请选择省份"
            @change="changeProvinceInfo"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(province, index) in pcas"
              :key="index"
              :value="province.name"
          />
        </el-select>
        <el-select
            v-show="addr.province != ''"
            v-model="addr.city"
            placeholder="请选择城市"
            @change="changeCityInfo"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(city, index) in provinceInfo.children"
              :key="index"
              :value="city.name"
          />
        </el-select>
        <el-select
            v-show="addr.city !== ''"
            v-model="addr.district"
            placeholder="请选择区/县"
            @change="changeDistrictInfo"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(district, index) in cityInfo.children"
              :key="index"
              :value="district.name"
          />
        </el-select>
        <el-select
            v-show="addr.district !== ''"
            v-model="addr.street"
            placeholder="请选择街道/乡/镇"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(street, index) in districtInfo.children"
              :key="index"
              :value="street.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="addr.address" type="textarea"/>
      </el-form-item>
      <el-form-item label="收件姓名">
        <el-input v-model="addr.contact" type="text"/>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="addr.phone" type="text"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="addAddr">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- END 新增对话框 -->

  <!-- START 编辑对话框 -->
  <el-dialog v-model="eiditDialogShow" title="修改地址信息" @close="cancelEdit" align-center>
    <el-form>
      <el-form-item label="地址">
        <el-select
            v-model="addr.province"
            placeholder="请选择省份"
            @change="changeProvinceInfo"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(province, index) in pcas"
              :key="index"
              :value="province.name"
          />
        </el-select>
        <el-select
            v-show="addr.province != ''"
            v-model="addr.city"
            placeholder="请选择城市"
            @change="changeCityInfo"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(city, index) in provinceInfo.children"
              :key="index"
              :value="city.name"
          />
        </el-select>
        <el-select
            v-show="addr.city !== ''"
            v-model="addr.district"
            placeholder="请选择区/县"
            @change="changeDistrictInfo"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(district, index) in cityInfo.children"
              :key="index"
              :value="district.name"
          />
        </el-select>
        <el-select
            v-show="addr.district !== ''"
            v-model="addr.street"
            placeholder="请选择街道/乡/镇"
            style="width: 150px;margin-right: 5px;"
        >
          <el-option
              v-for="(street, index) in districtInfo.children"
              :key="index"
              :value="street.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="addr.address" type="textarea"/>
      </el-form-item>
      <el-form-item label="收件姓名">
        <el-input v-model="addr.contact" type="text"/>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="addr.phone" type="text"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="updateAddrInfo">提交</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- END 编辑对话框 -->
</template>

<script setup>
import addrApi from "@/api/AddrApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import pcas from '@/stores/pcas-code.json'

// 地址列表
const addrList = ref([])
// 是否让添加对话框显示
const addDialogShow = ref(false)
// 是否让修改对话框显示
const eiditDialogShow = ref(false)
// 保持新增和修改信息的对象
const addr = ref({
  id: null,
  contact: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  street: '',
  address: '',
  userId: null
})

// 选中的省份信息
const provinceInfo = ref({})
// 选中的城市信息
const cityInfo = ref({})
// 选中的县/区信息
const districtInfo = ref({})

// 当选中省份发生变化
const changeProvinceInfo = (p) => {
  // 发生变化，先恢复其他默认值
  provinceInfo.value = {}
  cityInfo.value = {}
  districtInfo.value = {}

  addr.value.city = ''
  addr.value.district = ''
  addr.value.street = ''

  // 对参数进行再次赋值
  pcas.forEach(province => {
    if (p === province.name) {
      provinceInfo.value = province
    }
  })
}

// 当选中市份发生变化
const changeCityInfo = (p) => {
  // 发生变化，先恢复其他默认值
  cityInfo.value = {}
  districtInfo.value = {}


  addr.value.district = ''
  addr.value.street = ''

  // 对参数进行再次赋值
  provinceInfo.value.children.forEach(city => {
    if (p === city.name) {
      cityInfo.value = city
    }
  })
}
// 当选中区/县份发生变化
const changeDistrictInfo = (p) => {
  // 发生变化，先恢复其他默认值
  districtInfo.value = {}

  addr.value.street = ''

  // 对参数进行再次赋值
  cityInfo.value.children.forEach(district => {
    if (p === district.name) {
      districtInfo.value = district
    }
  })
}

// 获取当前用户所有地址
const getAddrList = () => {
  addrApi.getAll()
      .then(resp => {
        if (resp.code === 10000) {
          addrList.value = resp.data
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 编辑渲染下拉列表
const editSelect = () => {
  pcas.forEach(p => {
    if (p.name === addr.value.province) {
      provinceInfo.value = p
      p.children.forEach(c => {
        if (c.name === addr.value.city) {
          cityInfo.value = c
          c.children.forEach(d => {
            if (d.name === addr.value.district) {
              districtInfo.value = d
            }
          })
        }
      })
    }
  })
}

// 打开编辑窗口
const showEdit = (id) => {
  addrApi.getById(id)
      .then(resp => {
        if (resp.code === 10000) {
          addr.value = resp.data
          // 根据情况渲染下拉列表
          editSelect()
          eiditDialogShow.value = true
        } else {
          ElMessage.error(resp.msg)
        }
      })
}


// 清空数据
const resetAddr = () => {
  addr.value = {
    id: null,
    contact: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    street: '',
    address: '',
    userId: null
  }
  // 选中的省份信息
  provinceInfo.value = {}
  // 选中的城市信息
  cityInfo.value = {}
  // 选中的县/区信息
  districtInfo.value = {}
}

// 取消编辑窗口
const cancelEdit = () => {
  eiditDialogShow.value = false
  resetAddr()
}

// 添加地址方法
const addAddr = () => {
  addrApi.insert(addr.value)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          getAddrList()
          //   关闭弹出层
          addDialogShow.value = false
          //   恢复数据
          resetAddr()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 修改地址信息
const updateAddrInfo = () => {
  addrApi.updateInfo(addr.value)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          cancelEdit()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 删除订单
const delAddr = (id) => {
  addrApi.delInfo(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          getAddrList()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 设置默认地址
const setDefaultAddr = (id) => {
  addrApi.setDefaultAddr(id)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          getAddrList()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}


getAddrList()
</script>

<style scoped>
.addrList li {
  margin: 0px 20px 20px 0px;
  padding: 20px;
  float: left;
  width: 280px;
  border: 1px solid #EEEEEE;
  background-color: #FFFFFF;
  border-radius: 5px;
}

.addrList li:nth-child(3n) {
  margin-right: 0px;
}

.addrList li:hover {
  box-shadow: 0px 0px 20px #2c3e50;
}

.addrList li div {
  line-height: 30px;
  height: 30px;
}

.addrList li .area {
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addrList li .adress {
  font-size: 14px;
  color: #AAAAAA;
}

.addrList li .contact {
  color: var(--theme-color);
  font-weight: bold;
}

.addrList li .phone {
  font-size: 14px;
}

.addrList li .option {
  text-align: right;
}

.addrList .defaultCart {
  background-color: #ffAAAA;
  border-radius: 10px;
}

</style>